<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>agency-startbootstap theme</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
	<div id="nav">
		<div class="container">
			<a href="#" class="navbar-brand">start bootstrap</a>
			<ul class="navbar">
				<li><a href="#service">service</a></li>
				<li><a href="#portfolio">portfolio</a></li>
				<li><a href="#about">about</a></li>
				<li><a href="#team">team</a></li>
				<li><a href="#contact">contact</a></li>
			</ul>
		</div>
	</div>

	<div id="header">
		<div class="container">
			<ul class="header-content">
				<p>Welcome to our studio</p>
				<h1>Nice To Meet You</h1>
				<br>
				<a href="#" class="btn header-btn">TELL ME MORE</a>
			</ul>
		</div>
	</div>
	<!-- service section -->
	<div id="service">
		<div class="container">
			<div class="content-heading">
				<h1>service</h1>
				<p>Lorem ipsum dolor sit amet consectetur.</p>
			</div>
			<ul class="works clearfix">
				<li>
					<span class="fa-stack"><i class="fa fa-shopping-cart fa-4x"></i></span>
					<div class="service-caption">
						<h3>E-Commerce</h3>
						<p class="text-muted">
								Lorem ipsum dolor sit amet
						</p>
					</div>					
				</li>
				<li>
					<span class="fa-stack"><i class="fa fa-laptop fa-4x"></i></span>
					<div class="service-caption">
						<h3>Responsive Design</h3>
						<p class="text-muted">
							Lorem ipsum dolor sit amet
						</p>
					</div>	
				</li>
				<li>
					<span class="fa-stack"><i class="fa fa-lock fa-4x"></i></span>
					<div class="service-caption">
						<h3>Web Security</h3>
						<p class="text-muted">
							Lorem ipsum dolor sit amet
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>

	<!-- Portfolio Grid Section -->
	<div id="portfolio">
		<div class="container">
			<div class="content-heading">
				<h1>portfolio</h1>
				<p>Lorem ipsum dolor sit amet consectetur.</p>
			</div>
			<div class="portfolio-item text-center clearfix">
				<li class="row">
					<a href="#portfolio" class="portfolio-link">
						<div class="portfolio-hover">
							<i class="fa fa-plus fa-3x"></i>
						</div>
						<img src="img/portfolio/roundicons.png">
					</a>
					<div class="portfolio-caption">
						<h3>Round Icons</h3>
						<p>Graphic Design</p>
					</div>		
				</li>

				<li class="row">
					<a href="#portfolio"><img src="img/portfolio/startup-framework.png"></a>
					<div class="portfolio-caption">
						<h3>Startup Framework</h3>
						<p>Website Design</p>
					</div>				
				</li>

				<li class="row">
					<a href="#portfolio"><img src="img/portfolio/treehouse.png"></a>
					<div class="portfolio-caption">
						<h3>TreeHouse</h3>
						<p>Website Design</p>
					</div>				
				</li>

				<li class="row">
					<a href="#portfolio"><img src="img/portfolio/golden.png"></a>
					<div class="portfolio-caption">
						<h3>Golden</h3>
						<p>Website Design</p>
					</div>				
				</li>

				<li class="row">
					<a href="#portfolio"><img src="img/portfolio/escape.png"></a>
					<div class="portfolio-caption">
						<h3>Escape</h3>
						<p>Website Design</p>
					</div>				
				</li>

				<li class="row">
					<a href="#portfolio"><img src="img/portfolio/dreams.png"></a>
					<div class="portfolio-caption">
						<h3>Dreams</h3>
						<p>Website Design</p>
					</div>				
				</li>

			</div>
		</div>
	</div>

	<div id="about">
		<div class="container">
			<div class="content-heading">
				<h1>about</h1>
				<p>Lorem ipsum dolor sit amet consectetur.</p>
			</div>
			<div class="row">
				<ul class="timeline">
					<li>
						<div class="timeline-image">
							<img src="img/about/1.jpg">
						</div>
						<div class="timeline-panel">
							<div class="timeline-heading">
								<h3>2009-2011</h3>
								<h3>Our Humble Beginnings</h3>
							</div>
							<div class="timeline-body">
								<p class="text-muted">
									Lorem ipsum dolor sit amet, 
									consectetur adipisicing elit. 
									Sunt ut voluptatum eius sapiente, 
									totam reiciendis temporibus qui quibusdam, 
									recusandae sit vero unde, sed, 
									incidunt et ea quo dolore laudantium consectetur!
								</p>
							</div>
						</div>
					</li>

					<li class="timeline-inverted">
						<div class="timeline-image">
							<img src="img/about/2.jpg">
						</div>
						<div class="timeline-panel">
							<div class="timeline-heading">
								<h4>MARCH 2011</h4>
								<h4>An Agency is Born</h4>
							</div>
							<div class="timeline-body">
								<p class="text-muted">
									Lorem ipsum dolor sit amet, 
									consectetur adipisicing elit. 
									Sunt ut voluptatum eius sapiente, 
									totam reiciendis temporibus qui quibusdam, 
									recusandae sit vero unde, sed, 
									incidunt et ea quo dolore laudantium consectetur!
								</p>
							</div>
						</div>
					</li>

					<li>
						<div class="timeline-image">
							<img src="img/about/3.jpg">
						</div>
						<div class="timeline-panel">
							<div class="timeline-heading">
								<h3>DECEMBER 2012</h3>
								<h3>Transition to Full Service</h3>
							</div>
							<div class="timeline-body">
								<p class="text-muted">
									Lorem ipsum dolor sit amet, 
									consectetur adipisicing elit. 
									Sunt ut voluptatum eius sapiente, 
									totam reiciendis temporibus qui quibusdam, 
									recusandae sit vero unde, sed, 
									incidunt et ea quo dolore laudantium consectetur!
								</p>
							</div>
						</div>
					</li>

					<li class="timeline-inverted">
						<div class="timeline-image">
							<img src="img/about/4.jpg">
						</div>
						<div class="timeline-panel">
							<div class="timeline-heading">
								<h4>JULY 2014</h4>
								<h4>Phase Two Expansion</h4>
							</div>
							<div class="timeline-body">
								<p class="text-muted">
									Lorem ipsum dolor sit amet, 
									consectetur adipisicing elit. 
									Sunt ut voluptatum eius sapiente, 
									totam reiciendis temporibus qui quibusdam, 
									recusandae sit vero unde, sed, 
									incidunt et ea quo dolore laudantium consectetur!
								</p>
							</div>
						</div>
					</li>

					<li class="timeline-inverted">
						<div class="timeline-image timeline-more">
							<h4>
								BE PART
								<br>
								OF OUR
								<br>
								SROYR
							</h4>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div id="team">
		<div class="container">
			<div class="content-heading">
				<h1>OUR TEAM</h1>
				<p>Lorem ipsum dolor sit amet consectetur.</p>
			</div>
			<ul class="member-intro clearfix">
				<li>
					<div class="member-info">
						<img src="img/team/5.jpg">
						<h4>Kay Garland</h4>
						<p>Lead Designer</p>
					</div>
					<ul class="social-icon clearfix">
						<li>
							<a href="#team"><i class="fa fa-facebook fa-2x"></i></a>
						</li>
						<li>
							<a href="#team"><i class="fa fa-twitter fa-2x"></i></a>
						</li>
						<li>
							<a href="#team"><i class="fa fa-linkedin fa-2x"></i></a>
						</li>
					</ul>
				</li>

				<li>
					<div class="member-info">
						<img src="img/team/6.jpg">
						<h4>Larry Parker</h4>
						<p>Lead Marketer</p>
					</div>
					<ul class="social-icon">
						<li>
							<a href="#team"><i class="fa fa-facebook fa-2x"></i></a>
						</li>
						<li>
							<a href="#team"><i class="fa fa-twitter fa-2x"></i></a>
						</li>
						<li>
							<a href="#team"><i class="fa fa-linkedin fa-2x"></i></a>
						</li>
					</ul>
				</li>

				<li>
					<div class="member-info">
						<img src="img/team/7.jpg">
						<h4>Diana Pertersen</h4>
						<p>Lead Developer</p>
					</div>
					<ul class="social-icon">
						<li>
							<a href="#team"><i class="fa fa-facebook fa-2x"></i></a>
						</li>
						<li>
							<a href="#team"><i class="fa fa-twitter fa-2x"></i></a>
						</li>
						<li>
							<a href="#team"><i class="fa fa-linkedin fa-2x"></i></a>
						</li>
					</ul>
				</li>
			</ul>

			<div class="large text-muted">
				<p>
					 Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
					 Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, 
					 totam corporis ea, alias ut unde.
				</p>
			</div>
		</div>
	</div>

	<div id="Clients">
		<div class="container">
			<ul class="client-logo clearfix">
				<div>
					<a href="#"><img src="img/logo/envato.jpg"></a>
				</div>
				<div>
					<a href="#"><img src="img/logo/designmodo.jpg"></a>
				</div>
				<div>
					<a href="#"><img src="img/logo/themeforest.jpg"></a>
				</div>
				<div>
					<a href="#"><img src="img/logo/wordpress.jpg"></a>
				</div>
			</ul>
		</div>
	</div>

	<div id="contact">
		<div class="container">
			<div class="content-heading">
				<h1>CONTACT US</h1>
				<p>Lorem ipsum dolor sit amet consectetur.</p>
			</div>

			<div class="row clearfix">
				<form name="sentMessage" id="contactForm" novalidate>
					<div class="contact-form">
						<div class="form-ground">
							<input type="text" class="form-control" placeholder="YOUR NAME" id="name">
						</div>
						<div class="form-ground">
							<input type="email" class="form-control" placeholder="YOUR EMAIL" id="email">
						</div>
						<div class="form-ground">
							<input type="tel" class="form-control" placeholder="YOUR PHONE" id="tel">
						</div>
					</div>

					<div class="form-textarea">
						<textarea class="form-control" placeholder="YOUR MESSAGE" id="message" rows="15" cols="100"></textarea>
					</div>
					<div class="clearfix"></div>
					<div class=" form-btn text-center">
						<button type="submit" class="btn btn-x1">Sent Message</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div id="footer">
		<div class="container clearfix">
			<div class="footer-content">
				<p>copyright© Your Wesite 2014</p>
			</div>
			<ul class="social-icon clearfix more">
				<li><a href=""><i class="fa fa-facebook fa-2x"></i></a></li>
				<li><a href=""><i class="fa fa-twitter fa-2x"></i></a></li>
				<li><a href=""><i class="fa fa-linkedin fa-2x"></i></a></li>
			</ul>
			<div class="quickline clearfix">
				<li><a href="">Privacy Policy</a></li>
				<li><a href="">Terms of Use</a></li>
			</div>
		</div>
	</div>
	
</body>
</html>